<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="header-title">消息</text>
      <view class="header-actions">
        <view class="add-btn" @tap="addNewChat">
          <text class="add-icon">+</text>
        </view>
      </view>
    </view>

    <!-- 消息分类 -->
    <view class="message-tabs">
      <view 
        v-for="(tab, index) in messageTabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === tab.id }"
        @tap="switchTab(tab.id)"
      >
        <text class="tab-text">{{ tab.name }}</text>
        <view v-if="tab.count > 0" class="tab-badge">{{ tab.count }}</view>
      </view>
    </view>

    <!-- 消息列表 -->
    <scroll-view scroll-y="true" class="messages-scroll">
      <view class="message-list">
        <view 
          v-for="(message, index) in filteredMessages" 
          :key="message.id"
          class="message-item" 
          @tap="openChat(message)"
        >
          <view class="message-avatar">
            <image class="avatar-image" :src="message.avatar" mode="aspectFill"></image>
            <view v-if="message.isOnline" class="online-dot"></view>
          </view>
          
          <view class="message-content">
            <view class="message-header">
              <text class="message-name">{{ message.name }}</text>
              <text class="message-time">{{ message.time }}</text>
            </view>
            
            <view class="message-preview">
              <text class="preview-text">{{ message.lastMessage }}</text>
              <view v-if="message.unreadCount > 0" class="unread-badge">
                {{ message.unreadCount }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="filteredMessages.length === 0" class="empty-state">
        <image class="empty-icon" src="/static/home/empty-message.png" mode="aspectFit"></image>
        <text class="empty-text">暂无{{ currentTabName }}消息</text>
      </view>
    </scroll-view>

    <!-- 底部导航 -->
    <BottomNav current-page="messages" />
  </view>
</template>

<script>
import BottomNav from '../../components/BottomNav.vue'

export default {
  components: {
    BottomNav
  },
  data() {
    return {
      currentTab: 'all',
      messageTabs: [
        { id: 'all', name: '全部', count: 0 },
        { id: 'private', name: '私聊', count: 3 },
        { id: 'group', name: '群聊', count: 2 },
        { id: 'system', name: '系统', count: 1 }
      ],
      messages: [
        {
          id: 1,
          type: 'private',
          name: '谢小盛',
          avatar: '/static/home/av.png',
          lastMessage: '你好，请问这个活动还能报名吗？',
          time: '14:23',
          unreadCount: 2,
          isOnline: true
        },
        {
          id: 2,
          type: 'group',
          name: 'UW中国学生群',
          avatar: '/static/home/group-avatar.png',
          lastMessage: '李明: 明天有人一起去图书馆吗？',
          time: '12:45',
          unreadCount: 5,
          isOnline: false
        },
        {
          id: 3,
          type: 'private',
          name: '韩春',
          avatar: '/static/home/av.png',
          lastMessage: '谢谢你的帮助！',
          time: '昨天',
          unreadCount: 0,
          isOnline: false
        },
        {
          id: 4,
          type: 'system',
          name: '系统消息',
          avatar: '/static/home/system-avatar.png',
          lastMessage: '您的帖子已被成功发布',
          time: '10-20',
          unreadCount: 1,
          isOnline: false
        },
        {
          id: 5,
          type: 'group',
          name: '租房信息群',
          avatar: '/static/home/group-avatar.png',
          lastMessage: '张雨: 有人合租吗？地址在...',
          time: '10-19',
          unreadCount: 0,
          isOnline: false
        },
        {
          id: 6,
          type: 'private',
          name: '李明',
          avatar: '/static/home/av.png',
          lastMessage: '恭喜你拿到offer！',
          time: '10-18',
          unreadCount: 1,
          isOnline: true
        }
      ]
    }
  },
  computed: {
    filteredMessages() {
      if (this.currentTab === 'all') {
        return this.messages.sort((a, b) => {
          // 按照未读数量和时间排序
          if (a.unreadCount > 0 && b.unreadCount === 0) return -1;
          if (a.unreadCount === 0 && b.unreadCount > 0) return 1;
          return b.id - a.id; // 按ID倒序（模拟时间排序）
        });
      }
      return this.messages.filter(message => message.type === this.currentTab);
    },
    currentTabName() {
      const tab = this.messageTabs.find(tab => tab.id === this.currentTab);
      return tab ? tab.name : '';
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '消息'
    });
  },
  methods: {
    switchTab(tabId) {
      this.currentTab = tabId;
    },
    addNewChat() {
      console.log('添加新聊天');
      // 可以导航到添加好友或创建群聊页面
      uni.showActionSheet({
        itemList: ['添加好友', '创建群聊'],
        success: (res) => {
          if (res.tapIndex === 0) {
            console.log('添加好友');
          } else if (res.tapIndex === 1) {
            console.log('创建群聊');
          }
        }
      });
    },
    openChat(message) {
      console.log('打开聊天:', message.name);
      // 清除未读消息数量
      message.unreadCount = 0;
      
      // 导航到聊天页面
      uni.navigateTo({
        url: `/pages/chat/chat?id=${message.id}&name=${message.name}&avatar=${message.avatar}`
      });
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 120rpx;
}

/* 头部 */
.header {
  height: 88rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
}

.add-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #007aff;
  border-radius: 50%;
}

.add-icon {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
}

/* 消息分类 */
.message-tabs {
  background: #fff;
  display: flex;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.tab-item {
  padding: 12rpx 24rpx;
  margin-right: 20rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  position: relative;
  display: flex;
  align-items: center;
}

.tab-item.active {
  background: #007aff;
}

.tab-text {
  font-size: 26rpx;
  color: #666;
}

.tab-item.active .tab-text {
  color: #fff;
}

.tab-badge {
  background: #ff4444;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 10rpx;
  margin-left: 8rpx;
  min-width: 20rpx;
  text-align: center;
}

.tab-item.active .tab-badge {
  background: #fff;
  color: #007aff;
}

/* 消息列表 */
.messages-scroll {
  height: calc(100vh - 240rpx);
}

.message-list {
  background: #fff;
}

.message-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.message-item:last-child {
  border-bottom: none;
}

.message-avatar {
  position: relative;
  margin-right: 24rpx;
}

.avatar-image {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
}

.online-dot {
  position: absolute;
  bottom: 4rpx;
  right: 4rpx;
  width: 20rpx;
  height: 20rpx;
  background: #00c851;
  border: 4rpx solid #fff;
  border-radius: 50%;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.message-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.message-time {
  font-size: 22rpx;
  color: #999;
}

.message-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-text {
  font-size: 24rpx;
  color: #666;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unread-badge {
  background: #ff4444;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 10rpx;
  margin-left: 16rpx;
  min-width: 32rpx;
  text-align: center;
}

/* 空状态 */
.empty-state {
  padding: 120rpx 60rpx;
  text-align: center;
}

.empty-icon {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 30rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>
